<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-if & v-else & v-show 实例练习</title>
    <script type="text/javascript" src="../assets/vue.js"></script>

</head>
<body>

<div id="app">
    <h3> {{message}}</h3>
    <hr>
    <div >
        <p>多选框 绑定数组</p>
        <label for="xxxp" >{{signtest}}</label>
        <input id="xxxp" v-model="signtest" type="checkbox">
    </div>
    <hr>
    <div>
        <p>多选框 绑定数组</p>
        <p>{{manytest}}</p>
        <input id="xoo" v-model="manytest" value="zhanfang" type="checkbox">

        <label for="xxo" >xiaoqiang</label>
        <input id="xxo" v-model="manytest" value="xiaoqiang" type="checkbox">

        <label for="xxxx" >daqiang</label>
        <input id="xxxx" v-model="manytest" value="daqiang" type="checkbox">

        <label for="ooo" >dedecms</label>
        <input id="ooo" v-model="manytest" value="dedecms" type="checkbox">
    </div>
    <div>
        <hr><br>
        <label>您选择的是：{{sex}}</label>
        <input type="radio" value="男" id="one" v-model="sex">
        <input type="radio" value="女" id="two" v-model="sex">
    </div>
</div>

<script>
    //v-model 的修饰符  v-model.lazy  懒惰的，v-model.num  限定为数字

    var data = {
         message:"v-model 双向数据绑定 练习",
         signtest:true,  //单选
         manytest:[] ,  //多选
         sex:'男'
    };

    var app = new Vue({
        el:'#app',
        data:data
    });


</script>

</body>
</html>